<template lang="pug">
  .page
    .lzw-section
      .tab-title
        .font-14(v-for="(item,index) in payStatusArr" :key="index" @click="filterMethod(index,$event)" :data-status="item.key" :class="tabIndex === index ? 'active' : ''") {{item.value}}订单
      .tab-container.pt-20
        .handle-box.clearfix.pr-20.pl-20
          .pull-left
            Input.lzw-input(v-model="userName" search clearable enter-button placeholder="请输入订单名称/员工姓名" style="width:400px" @on-search="search")
          .pull-right
            template(v-if="tabIndex === 1")
              Button.mybtn-2(type="info" @click="payBtn(1)").ml-15 微信支付
              Button.mybtn-2(type="info" @click="payBtn(2)").ml-15 银行卡支付
            Button.mybtn-2(type="info" @click="cancel").ml-15 删除
        .pall-20
          Table.beautiful-table(width="100%" stripe :columns="thead" :data="listData" height="500" :loading="loading" @on-selection-change="tableSelectChange")
            .clearfix.pl-20.pr-20(slot="footer")
              Page(:total="totalcount" :current="pageIndex" :page-size="pageSize" @on-change="pageChange" show-total)
    Modal(v-model="payModal" title="支付")
      Form(ref="formValidate" :label-width="86")
        FormItem.mb-0(label="支付日期：")
          DatePicker(:value="payTime" format="yyyy-MM-dd HH:mm" type="datetime" placeholder="请选择支付日期" style="width:100%" @on-change="dateChange")
      .text-center(slot="footer")
        //- Button(@click="dispatchShow=false") 全选
        Button(@click="payModal=false") 取消
        Button(type="info" @click="confirmFn") 确定提交
</template>

<script>
import dataApi from '@/api/data.js'
import vOrderApi from '@/api/v_order.api.js'
import Mixin from './payMixin.js'

export default {
  name: 'v_pay',
  data () {
    return {
      thead: [],
      payModal: false,
      tabIndex: 1,
      payStatusArr: [],
      payStatus: '0', // 订单支付状态
      orderPayType: '', // 支付方式
      payTime: '', // 支付时间
      listData: [],
      ids: [],
      userName: '', // 订单名称/姓名搜索
      loading: false,
      totalcount: 0,
      pageIndex: 1,
      pageSize: 10
    }
  },
  mixins: [Mixin],
  created () {
    this.getEnum()
    this.getListData()
    let thead_mixin = ['selection', 'completeTime', 'number', 'orderName', 'customerName', 'commission', 'receiptUserName', 'receiptUserIdCardNo', 'orderPrice', 'payStatus']
    this.thead = this.getTableColumns(thead_mixin)
  },
  methods: {
    // 获取列表
    getListData () {
      this.loading = true
      vOrderApi.getPayList({
        UserName: this.userName,
        PayStatus: this.payStatus,
        PageIndex: this.pageIndex,
        PageSize: this.pageSize
      }).then(res => {
        this.loading = false
        if (res.data.success) {
          this.listData = res.data.data
          this.totalcount = res.data.totalRows
        } else {
          
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    search () {
      this.getListData()
    },
    filterMethod (index, e) {
      console.log(index)
      let thead_mixin = []
      if (index) {
        thead_mixin = ['selection', 'completeTime', 'number', 'orderName', 'customerName', 'commission', 'receiptUserName', 'receiptUserIdCardNo', 'orderPrice', 'payStatus']
      } else {
        thead_mixin = ['selection', 'completeTime', 'payTime', 'number', 'orderName', 'customerName', 'commission', 'receiptUserName', 'receiptUserIdCardNo', 'orderPrice', 'payStatus']
      }
      this.thead = this.getTableColumns(thead_mixin)
      this.payStatus = e.target.dataset.status
      this.tabIndex = index
      this.getListData()
    },
    tableSelectChange (val) {
      console.log(val)
      this.ids = val.map(item => {
        return item.vOrderDetailedId
      })
    },
    pageChange (index) {
      this.pageIndex = index
      this.getListData()
    },
    dateChange (val) {
      this.payTime = val
    },
    checkInfo () {
      console.log()
    },
    payBtn (key) {
      if (this.ids.length > 0) {
        this.payModal = true
        this.payTime = this.getNowFormatDate()
        this.orderPayType = key
      } else {
        this.$Message.warning('请选择需要支付的订单')
      }
    },
    // 确认提交
    confirmFn () {
      vOrderApi.vPayOrder({
        DetaiIds: this.ids,
        Userid: JSON.parse(localStorage.getItem('clientLoginInfo')).data.userId,
        PayTime: this.payTime,
        OrderPayType: this.orderPayType
      }).then(res => {
        if (res.data.success) {
          this.$Message.success(res.data.message)
          this.payModal = false
          this.getListData()
        } else {
          
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    cancel () {
      if (this.ids.length > 0) {
        this.$Message.success('成功')
      } else {
        this.$Message.warning('请选择需要删除的订单')
      }
    },
    // 枚举
    getEnum () {
      let groupNames = 'voddjob.orderpaystatus,voddjob.paytype'
      dataApi.getEnum({
        groupName: groupNames
      }).then(res => {
        this.payStatusArr = this.getItems(res.data, 'voddjob.orderpaystatus')
      })
    },
    getItems (arr, key) {
      let object = arr.find((item) => {
        return item.group === key
      })
      return object.items
    },
    getNowFormatDate () {
      var now = new Date()

      var year = now.getFullYear() // 年
      var month = now.getMonth() + 1 // 月
      var day = now.getDate() // 日

      var hh = now.getHours() // 时
      var mm = now.getMinutes() // 分
      var ss = now.getSeconds() // 分

      var clock = year + '-'

      if (month < 10) { clock += '0' }

      clock += month + '-'

      if (day < 10) { clock += '0' }

      clock += day + ' '

      if (hh < 10) { clock += '0' }

      clock += hh + ':'
      if (mm < 10) { clock += '0' }
      clock += mm + ':'

      if (ss < 10) { clock += '0' }
      clock += ss
      return clock
    }
  }
}
</script>

<style lang="less" scoped>
  .style-1{
    color: @main_color;
    cursor: pointer;
    &:hover{
      text-decoration: underline;
    }
  }
</style>
<style lang="less">
  .lzw-input{
    .ivu-input-icon{
      right: 50px;
    }
  }
</style>
